<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:p="http://primefaces.org/ui">


<h:body>
<p:growl id="messages" showDetail="true"/>  


<h:form>

<p:dataTable var="productInstance" selection="#{productBean.selectedProductInstance}" selectionMode="single" rowKey="#{productInstance.productInstanceId}" value="#{productBean.productInstanceList}"  
     id="imageList" editable="true">  
  
        <f:facet name="header">  
            Product Instance List  
        </f:facet>  
  
  
        <p:column headerText="productInstanceId" style="width:125px">  
            <p:cellEditor>  
                <f:facet name="output">  
                    <h:outputText value="#{productInstance.productInstanceId}" />  
                </f:facet>  
                <f:facet name="input">  
                    <p:inputText value="#{productInstance.productInstanceId}" style="width:100%"/>  
                </f:facet>  
            </p:cellEditor>  
        </p:column>  
  
        <p:column headerText="productId" style="width:125px">  
            <p:cellEditor>  
                <f:facet name="output">  
                    <h:outputText value="#{productInstance.productId}" />  
                </f:facet>  
                <f:facet name="input">  
                    <p:inputText value="#{productInstance.productId}" style="width:100%" label="Year"/>  
                </f:facet>  
            </p:cellEditor>  
        </p:column>  
  
        <p:column headerText="product name" style="width:125px">  
            <p:cellEditor>  
                <f:facet name="output">  
                    <h:outputText value="#{productInstance.product.productName}" />  
                </f:facet>  
                <f:facet name="input">  
                <p:inputText value="#{productInstance.product.productName}" style="width:100%" label="Year"/> 
                </f:facet>  
            </p:cellEditor>  
        </p:column>  
        
        <p:column headerText="color id" style="width:125px">  
            <p:cellEditor>  
                <f:facet name="output">  
                    <h:outputText value="#{productInstance.colorId}" />  
                </f:facet>  
                <f:facet name="input">  
                <p:inputText value="#{productInstance.colorId}" style="width:100%" label="Year"/> 
                </f:facet>  
            </p:cellEditor>  
        </p:column>
        
        <p:column headerText="color value" style="width:125px">  
            <p:cellEditor>  
                <f:facet name="output">  
                    <h:outputText value="#{productInstance.color_product_option_value.optionValue}" />  
                </f:facet>  
                <f:facet name="input">  
                <p:inputText value="#{productInstance.color_product_option_value.optionValue}" style="width:100%" label="Year"/> 
                </f:facet>  
            </p:cellEditor>  
        </p:column>
        
        <p:column headerText="size id" style="width:125px">  
            <p:cellEditor>  
                <f:facet name="output">  
                    <h:outputText value="#{productInstance.colorId}" />  
                </f:facet>  
                <f:facet name="input">  
                <p:inputText value="#{productInstance.colorId}" style="width:100%" label="Year"/> 
                </f:facet>  
            </p:cellEditor>  
        </p:column>
        
        <p:column headerText="size value" style="width:125px">  
            <p:cellEditor>  
                <f:facet name="output">  
                    <h:outputText value="#{productInstance.size_product_option_value.optionValue}" />  
                </f:facet>  
                <f:facet name="input">  
                <p:inputText value="#{productInstance.size_product_option_value.optionValue}" style="width:100%" label="Year"/> 
                </f:facet>  
            </p:cellEditor>  
        </p:column>
        
        <p:column headerText="image type" style="width:125px">  
            <p:cellEditor>  
                <f:facet name="output">  
                    <h:outputText value="#{image.type}" />  
                </f:facet>  
                <f:facet name="input">  
                <p:inputText value="#{image.type}" style="width:100%" label="Year"/> 
                </f:facet>  
            </p:cellEditor>  
        </p:column>
        
        <p:column headerText="quantity" style="width:125px">  
            <p:cellEditor>  
                <f:facet name="output">  
                    <h:outputText value="#{productInstance.quantity}" />  
                </f:facet>  
                <f:facet name="input">  
                <p:inputText value="#{productInstance.quantity}" style="width:100%" label="Year"/> 
                </f:facet>  
            </p:cellEditor>  
        </p:column>  
  
        <f:facet name="footer">  
             <p:commandButton  id="addProductInstance" value="Import" icon="ui-icon-add"  action="#{productBean.onAddProductInstanceInput}" oncomplete="dlg.show()" update=":addDialog"/>
             <p:commandButton  id="editProductInstance" value="Export" icon="ui-icon-add"  action="#{productBean.onEditProductInstanceInput}"  oncomplete="dlg.show()" update=":addDialog" />
              <p:commandButton  id="deleteProductInstance" value="delete" icon="ui-icon-add"  action="#{productBean.onProductInstanceDelete}" update=":centerContentPanel"/>
        </f:facet>   
  
    </p:dataTable> 
</h:form>

<p:dialog id="addDialog" header="${productBean.importOrExport}"  widgetVar="dlg">  
    <h:form> 
     	  <h:inputHidden value="#{productBean.importOrExport}" />
          <h:panelGrid columns="2" cellpadding="5"> 
             
            <h:outputLabel  value="productId" />  
            <p:inputText value="#{productBean.new_product_instance.productId}" disable="true" readonly="true"   
                     label="productId" />
                    
            <h:outputLabel  value="color:" />  
            <p:selectOneMenu value="#{productBean.new_product_instance.colorId}" id="color_optionvalue_id">  
	            <f:selectItem itemLabel="Select Color" itemValue="0" />  
	            <f:selectItems value="#{productBean.colorList}" var="color_optionvalue" itemLabel="#{color_optionvalue.optionValue}" itemValue="#{color_optionvalue.optionValueId}" />  
	        </p:selectOneMenu>
	        
	        <h:outputLabel  value="size:" />  
            <p:selectOneMenu value="#{productBean.new_product_instance.sizeId}" id="size_optionvalue_id">  
	            <f:selectItem itemLabel="Select size" itemValue="0" />  
	            <f:selectItems value="#{productBean.sizeList}" var="size_optionvalue" itemLabel="#{size_optionvalue.optionValue}" itemValue="#{size_optionvalue.optionValueId}" />  
	        </p:selectOneMenu>  
                    
            <h:outputLabel  value="quantity" />  
            <p:inputText value="#{productBean.new_product_instance.quantity}"   
                    id="quantity"  label="quantity" /> 
                    
            <f:facet name="footer">  
                <p:commandButton id="submitProductInstanceButton" value="Submit" update=":centerContentPanel"   
                    actionListener="#{productBean.submitProductInstanceButton}"   
                    oncomplete="handleLoginRequest(xhr, status, args)"/>  
            </f:facet>  
        </h:panelGrid>
          
    </h:form>  
</p:dialog> 

<script type="text/javascript">  
    function handleLoginRequest(xhr, status, args) {  
//         if(args.validationFailed || !args.loggedIn) {  
//             jQuery('#addDialog').effect("shake", { times:3 }, 100);  
//         } else {  
            dlg.hide();  
//         }  
    }  
</script>

</h:body>

</html>